<template>
    <view class="tr-tabs-box">
        <view v-for="(item,index) in tabsList" :key="index"
              class="tabs-item" :class="{active:item.value===value}" @tap="changeTabs(item)">
            <view class="label">{{item.label}}</view>
            <view v-if="item.value===value" class="line"></view>
        </view>
    </view>
</template>
<script setup>
const props=defineProps({
    tabsList:{
        type:Array,
        default:()=>{
            return []
        }
    },
    modelValue:{
        type:String,
        default:''
    }
})

const value=useModel(props,'modelValue')
const columns=computed(()=>{
    return props.tabsList.length
})

const changeTabs=(item)=>{
    value.value=item.value
}
</script>
<style scoped lang="scss">
.tr-tabs-box{
    display: grid;
    grid-template-columns: repeat(v-bind(columns),1fr);
    background-color: #fff;padding: 24rpx;
    .tabs-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        .label{
            padding-bottom: 6rpx;
        }
    }
    .active{
        color: #007aff;
        .line{
            width: 50rpx;
            height: 4rpx;
            background-color: #007aff;
        }
    }
}
</style>
